import {
  QueryFilter,
  ProFormText
} from '@ant-design/pro-form';

import { Card, Col, Row, Statistic } from 'antd';

import { getToken } from '@/services/zego'
import ProCard from '@ant-design/pro-card';
import { ZegoExpressEngine } from 'zego-express-engine-webrtc';
import React from 'react';

let appID = 4152232504; // 请从官网控制台获取对应的appID
let server = 'wss://webliveroom-hk-test.zegocloud.com/ws';
let zg = new ZegoExpressEngine(appID, server);

export default class Audio extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      remoteStreamMap: {},
    };
  }
  render() {
    let that = this;
    const remoteStreamMap = this.state.remoteStreamMap;
    const remote = Object.keys(remoteStreamMap).map((key, index) => {
      let stream = remoteStreamMap[key];
      debugger;
      return (
        <Col>
          <ProCard title={stream["user"]["userName"]} type="inner" bordered colSpan="10">
            <audio id="remoteVideo" ref={audio => { audio.srcObject = stream['stream'] }} autoPlay playsInline controls ></audio>
          </ProCard>
        </Col>
      );
    });
    return (
      <>
        <QueryFilter<{
          name: string;
          company: string;
        }>
          onFinish={async (values) => {
            let res = await getToken(values.userId);
            let userID = values.userId;
            let userName = userID;
    
            await zg.loginRoom(
                  values.zoomId,
                  res.data,
                  { userID, userName },
                  { userUpdate: true }
            );
    
            // 流状态更新回调
            zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
              if (updateType == 'ADD') {
                streamList.map(async (stream,key) => {
                  console.log(stream["streamID"],stream["user"]["userName"],stream["user"]["userID"]);
                  const remoteStream = await zg.startPlayingStream(stream["streamID"]);
                  stream["stream"]= remoteStream;
                  remoteStreamMap[stream["streamID"]] = stream;
                  that.setState({
                    remoteStreamMap: remoteStreamMap
                  });
                })
              } else if (updateType == 'DELETE') {
                  // 流删除，停止拉流
                  streamList.map(async (stream,key) => {
                    console.log(stream["streamID"]);
                    const remoteStream = await zg.stopPlayingStream(stream["streamID"]);
                  })
              }
            });
    
            const localVideoStream = await zg.createStream({
              camera: { video: false, audio: true },
            });
            let localStream = localVideoStream;
            let streamID = userID;
            zg.startPublishingStream(streamID, localStream)
          }}
        >
          <ProFormText name="userId" label="用户id" rules={[{ required: true }]} />
          <ProFormText name="zoomId" label="房间号" rules={[{ required: true }]} />
        </QueryFilter>
        <Row  gutter={[16,16]}>
          {remote}
        </Row>
      </>
    );
  }
}